<template>
  <div class="nlp-service">
    <div class="service-header">
      <div class="container">
        <h1>自然语言处理</h1>
        <p class="subtitle">智能语言理解与处理解决方案</p>
      </div>
    </div>

    <div class="service-content">
      <div class="container">
        <section class="features">
          <h2>核心功能</h2>
          <div class="features-grid">
            <div class="feature-card" v-for="feature in features" :key="feature.title">
              <i :class="feature.icon"></i>
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </div>
        </section>

        <section class="use-cases">
          <h2>应用场景</h2>
          <div class="cases-grid">
            <div class="case-card" v-for="useCase in useCases" :key="useCase.title">
              <div class="case-icon">
                <i :class="useCase.icon"></i>
              </div>
              <div class="case-content">
                <h3>{{ useCase.title }}</h3>
                <p>{{ useCase.description }}</p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const features = ref([
  {
    icon: 'fas fa-comments',
    title: '智能对话',
    description: '基于大语言模型的智能对话系统，支持多轮对话和上下文理解'
  },
  {
    icon: 'fas fa-language',
    title: '文本分析',
    description: '深度文本理解，支持情感分析、文本分类、实体识别等功能'
  },
  {
    icon: 'fas fa-globe',
    title: '多语言处理',
    description: '支持多语言翻译、跨语言理解和文本生成'
  },
  {
    icon: 'fas fa-robot',
    title: '智能问答',
    description: '基于知识图谱的智能问答系统，提供准确的答案和建议'
  }
])

const useCases = ref([
  {
    icon: 'fas fa-headset',
    title: '智能客服',
    description: '24/7全天候在线客服，提供快速准确的问题解答'
  },
  {
    icon: 'fas fa-chart-line',
    title: '舆情分析',
    description: '社交媒体情感分析，把握市场动态和用户反馈'
  },
  {
    icon: 'fas fa-file-alt',
    title: '文档处理',
    description: '智能文档分类、摘要生成和关键信息提取'
  },
  {
    icon: 'fas fa-bullhorn',
    title: '营销助手',
    description: '智能营销文案生成，提升营销效率'
  }
])
</script>

<style scoped lang="scss">
.nlp-service {
  .service-header {
    background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
    padding: 80px 0;
    color: white;
    text-align: center;

    h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
    }
  }

  .service-content {
    padding: 60px 0;

    section {
      margin-bottom: 60px;

      h2 {
        text-align: center;
        font-size: 2rem;
        margin-bottom: 40px;
        color: var(--text-color);
      }
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;

      .feature-card {
        text-align: center;
        padding: 30px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;

        &:hover {
          transform: translateY(-10px);
        }

        i {
          font-size: 2.5rem;
          color: var(--primary-color);
          margin-bottom: 20px;
        }

        h3 {
          margin-bottom: 15px;
          color: var(--text-color);
        }

        p {
          color: #666;
          line-height: 1.6;
        }
      }
    }

    .cases-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;

      .case-card {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        padding: 30px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;

        &:hover {
          transform: translateY(-5px);
        }

        .case-icon {
          flex-shrink: 0;
          width: 60px;
          height: 60px;
          background: rgba(52, 152, 219, 0.1);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            font-size: 1.5rem;
            color: var(--primary-color);
          }
        }

        .case-content {
          h3 {
            margin-bottom: 10px;
            color: var(--text-color);
          }

          p {
            color: #666;
            line-height: 1.6;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .nlp-service {
    .service-header {
      padding: 60px 0;

      h1 {
        font-size: 2rem;
      }
    }

    .service-content {
      padding: 40px 0;
    }
  }
}
</style> 